<template>
  <div>
    <div>
      <el-button @click="bb1" v-if="!flag1" icon="el-icon-arrow-down">全部展开</el-button>
      <el-button @click="bb2" v-else icon="el-icon-arrow-up">全部收起</el-button>
    </div>
    <el-table
    :data="tableData"
    border
    style="width:1100px"
    ref="customerService"
    @mousedown="mousedownHandle('customerService', $event)"
    @click="aa('customerService', $event)"
    @selection-change="handleSelectionChange"
    :default-expand-all="flag1"
    row-key="id"
    :expand-row-keys="zkArry"
    @sort-change="sortChange"
    id="Tab">
    
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="150"
      sortable>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120"
      sortable="custom">
    </el-table-column>
    <el-table-column
      prop="province"
      label="省份"
      width="130">
    </el-table-column>
    <el-table-column
      prop="city"
      label="市区"
      width="125">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="268">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="邮编"
      width="120">
    </el-table-column>
    <el-table-column type="expand" width="130">
      <template slot-scope="props">
        <div class="aaa">
          <div class="bbb">
            <div><span>姓名：{{ props.row.name }}</span></div>
            <div><span>地址：{{ props.row.address }}</span></div>
            <div><span>邮编：{{ props.row.zip }}</span></div>
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      width="1">
      <template slot-scope="scope">
        <el-button @click="zk(scope.row.id,$event)" type="text" size="small" class="zkBtn">展开</el-button>
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  
  </div>

</template>

<script>
Array.prototype.remove = function(val) { 
var index = this.indexOf(val); 
if (index > -1) { 
this.splice(index, 1); 
} 
};
// eslint-disable-next-line no-unused-vars
import aa from './aa.js'
  export default {
    mounted() {
      let Tabl = document.querySelector(".el-table__body")
      Tabl.onmousedown = () =>{
         Tabl.onmousemove = (e)=>{
           let X = e.movementX
           document.querySelector(".el-table__body-wrapper").scrollLeft -= X
         }
      //  抬起时
        Tabl.onmouseup = () => {
            // console.log(e);
            Tabl.onmousemove = null;
            Tabl.onmouseup = null;
        };
      }     
    },
    methods: {
      //远程排序s
      sortChange(column){
        // console.log(column.column.property,"aa")
        console.log(column);
      }, 
      // 获取排序字段 自定义字段 然后重新向后端发送请求重新获取表格数据


      //远程排序end
      handleClick(row) {
        console.log(row);
      },
      mousedownHandle(refName, e){
        console.log(refName, e);
      },
      aa(refName, e){
        console.log(refName, e,"hhh");
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        // console.log(this.multipleSelection,"11");
      },
      bb1(){
        this.flag1 = !this.flag1
        this.tableData.forEach(element => {
          this.zkArry.push(element.id)
        });
        var Btn = document.querySelectorAll(".zkBtn")
        // console.log(Btn,"按钮");
        Btn.forEach(element => {
          // console.log(element.childNodes,"每一项");
          element.childNodes[2].innerHTML = "收起"
        });
      },
      bb2(){
        this.flag1 = !this.flag1
        this.zkArry = []
        var Btn = document.querySelectorAll(".zkBtn")
        Btn.forEach(element => {
          // console.log(element.childNodes,"每一项");
          element.childNodes[2].innerHTML = "展开"
        });
      },
      zk(id,e){
        // console.log(id,"id");
        // console.log(e.path[0].innerHTML,"event");
        if(e.path[0].innerHTML == "展开"){
          e.path[0].innerHTML = "收起"
          this.zkArry.push(id)
          // 如果全部展开了 
          if(this.zkArry.length == this.tableData.length){
            this.flag1 = true
          }
        }else if(e.path[0].innerHTML == "收起"){
          e.path[0].innerHTML = "展开"
          this.zkArry.remove(id)
          if(this.zkArry.length == 0){
            this.flag1 = false
          }
        }
      }
      //合并行和列的
      // arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      //   console.log(row, column, rowIndex, columnIndex);
      //   if(columnIndex == 7){
      //     if(rowIndex == 0){
      //       return [0, 2];
      //     }
      //   }
      // },
      
    },

    data() {
      return {
        tableData: [{
          id:1,
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          id:2,
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333
        }, {
          id:3,
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          id:4,
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        },{
          id:5,
          date: '2016-05-03',
          name: '李小豹',
          province: '北京',
          city: '朝阳区',
          address: '北京市朝阳区xx江路 126 号',
          zip: 200333
        }
        ],
        multipleSelection:[],
        flag1:false,
        zkArry:[],
      }
    }
  }
</script>
<style scoped>
::v-deep .el-table__expand-column{
  display: none !important;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar{
    width: 5px;
    height: 5px;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb{
    border-radius: 2px;
    height: 2px;
    background: rgb(15, 195, 226);
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track{
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    background: rgba(0,0,0,0.4);
}
.aaa{
  height: 100px;
  background: rgb(154, 221, 233);
  overflow-y: scroll;
  width: 100%;
}
.aaa::-webkit-scrollbar{
    width: 5px;
    height: 5px;
}
.aaa::-webkit-scrollbar-thumb{
    border-radius: 2px;
    height: 2px;
    background: rgb(15, 111, 238);
}
.aaa::-webkit-scrollbar-track{
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 2px; 
    background: rgb(212, 225, 228);
}
.bbb{
  height: 300px;
}
::v-deep .el-table__expanded-cell{
  padding: 0;
}
</style>